<template>
  <div class="search-box">
    <!--            <a-select-->
    <!--                class="select-item"-->
    <!--                show-search-->
    <!--                placeholder="Select a person"-->
    <!--                option-filter-prop="children"-->
    <!--                style="width: 120px; border:none;"-->
    <!--                :filter-option="filterOption"-->
    <!--                @focus="handleFocus"-->
    <!--                @blur="handleBlur"-->
    <!--                @change="handleChange"-->
    <!--            >-->
    <!--                <a-select-option style="border:none;" value="jack">-->
    <!--                    文章标题-->
    <!--                </a-select-option>-->
    <!--                <a-select-option style="border:none;" value="lucy">-->
    <!--                    Lucy-->
    <!--                </a-select-option>-->
    <!--                <a-select-option style="border:none;" value="tom">-->
    <!--                    Tom-->
    <!--                </a-select-option>-->
    <!--            </a-select>-->
    <div class="search-item">
      <input class="input-item" placeholder="请输入文献标题关键字" v-model="inputValue"/>
      <a-button class="button-item" @click="onSearch">
        <a-icon type="search"/>
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchComponent",
  data() {
    return {}
  },
  props: {
    inputValue: {
      type: String,
      default: ''
    }
  },
  methods: {
    onSearch() {
      console.log("onSearch111()")
      this.$router.push({path: "search", params: {keyword: this.searchValue}})
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log('blur');
    },
    handleFocus() {
      console.log('focus');
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },

};
</script>


<style lang="less" scoped>
//phone
@media only screen and (max-width: 576px) {

  .search-item {
    @width: 80vw;
    @height: 8vw;
    border: 1px solid RGBA(15, 121, 205, 1);
    width: @width;
    height: @height;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: calc(@height / 2);
    overflow: hidden;
    background: linear-gradient(to right, white 81.5%, RGBA(15, 121, 205, 1) 81.5%);
    background-clip: border-box;

    .input-item {
      width: calc(@width / 5 * 4);
      height: @height;
      border: none;
    }

    .button-item {
      width: calc(@width / 5);
      height: @height;
      border-radius: 0 calc(@height / 2) calc(@height / 2) 0;
      border: none;
      background-color: RGBA(15, 121, 205, 1);
      color: white;
      font-size: 5vw;
    }
  }
}

//pc
@media only screen and (min-width: 576px) {
  .search-item {
    border: 1px solid RGBA(15, 121, 205, 1);
    width: 470px;
    height: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(to right, white 78.5%, RGBA(15, 121, 205, 1) 78.5%);
    background-clip: border-box;

    .input-item {
      width: 370px;
      height: 32px;
      border: none;
      border-radius: 16px 0 0 16px;
    }

    .button-item {
      width: 100px;
      height: 35px;
      border-radius: 0 16px 16px 0;
      border: none;
      background-color: RGBA(15, 121, 205, 1);
      color: white;
      font-size: 18px;
    }
  }
}

</style>


<!--<style lang="less" scoped>-->
<!--//phone-->
<!--@media only screen and (max-width: 576px){-->
<!--    @width: 80vw;-->
<!--    @height:8vw;-->
<!--    .search-item{-->
<!--        border:1px solid RGBA(15, 121, 205, 1);-->
<!--        width:@width;-->
<!--        height:@height;-->
<!--        display:flex;-->
<!--        justify-content: flex-start;-->
<!--        align-items: center;-->
<!--        border-radius: calc(@height / 2);-->
<!--        overflow: hidden;-->
<!--        background:linear-gradient(to right, white 81.5%, RGBA(15, 121, 205, 1) 81.5%);-->
<!--        background-clip: border-box;-->
<!--        .select-item{-->
<!--            width:calc(@width / 5);-->
<!--            border-radius: calc(@height / 2) 0 0 calc(@height / 2);-->
<!--            border-color:white;-->
<!--            font-size:1vw;-->
<!--        }-->

<!--        .input-item{-->
<!--            width:calc(@width / 5 * 3);-->
<!--            height:@height;-->
<!--            border:none;-->
<!--        }-->
<!--        .button-item{-->
<!--            width:calc(@width / 5);-->
<!--            height:@height;-->
<!--            border-radius: 0 calc(@height / 2) calc(@height / 2) 0;-->
<!--            border:none;-->
<!--            background-color:RGBA(15, 121, 205, 1);-->
<!--            color:white;-->
<!--            font-size:5vw;-->
<!--        }-->
<!--    }-->
<!--}-->

<!--//pc-->
<!--@media only screen and (min-width:576px){-->
<!--    .search-item{-->
<!--        border:1px solid RGBA(15, 121, 205, 1);-->
<!--        width:470px;-->
<!--        height:32px;-->
<!--        display:flex;-->
<!--        justify-content: flex-start;-->
<!--        align-items: center;-->
<!--        border-radius: 16px;-->
<!--        overflow: hidden;-->
<!--        background:linear-gradient(to right, white 78.5%, RGBA(15, 121, 205, 1) 78.5%);-->
<!--        background-clip: border-box;-->
<!--        .select-item{-->
<!--            width:120px;-->
<!--            border-radius: 16px 0 0 16px;-->
<!--            border-color:white;-->
<!--        }-->

<!--        .input-item{-->
<!--            width:250px;-->
<!--            height:32px;-->
<!--            border:none;-->
<!--        }-->
<!--        .button-item{-->
<!--            width:100px;-->
<!--            height:35px;-->
<!--            border-radius: 0 16px 16px 0;-->
<!--            border:none;-->
<!--            background-color:RGBA(15, 121, 205, 1);-->
<!--            color:white;-->
<!--            font-size:18px;-->
<!--        }-->
<!--    }-->
<!--}-->

<!--</style>-->


<style>
/*a-select组件原生css,这里要把他去掉*/
.ant-select-selection {
  border: none;
}

.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active {
  border-color: white;
  border-right-width: 1px !important;
  outline: 0;
  box-shadow: 0 0 0 2px white;
}

.ant-select-selection:hover {
  border-color: #40a9ff;
  border-right-width: 1px !important;
}


/*a-input组件原生css,这里要把他去掉*/
.ant-input:focus {
  border-color: white;
  border-right-width: 0px !important;
  outline: 0;
  box-shadow: 0 0 0 2px white;
}

.ant-input:hover {
  border-color: white;
  border-right-width: 1px !important;
}

</style>
